<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<!-- 这里只能有相对路径 引入5个easyui相关的文件 -->
	<jsp:include page="../../common/common.jsp"></jsp:include>
</head>
<body>

	<table id="userTable"></table>
	
	<div id="userToolBar">
		<input id="searchBox" class="easyui-text" name="phone" />
		<a class="easyui-linkbutton" iconCls="icon-search" plain="ture" onclick="searchName();">查询</a>
					
	
		<br/>
		<a class="easyui-linkbutton" iconCls="icon-add" onclick="add('用户新增');" >增加</a>
		<a class="easyui-linkbutton" iconCls="icon-remove"  onclick="deleteByIds();" >删除</a>
		<a class="easyui-linkbutton" iconCls="icon-edit" onclick="update();" >修改</a>
	</div>
	
	<!-- 新增和修改所使用的div 开始 -->
	<div  id="userDialog" style="display: none" >
		<form id="userForm" method="post">
			<table >
				<tr>
					
					<td>姓名：</td>
					<td><input class="easyui-validatebox" data-options="required:true"  name="name" /></td>
					
					<!-- 有些东西 我们后台需要 但是前台不显示的处理方法....  hidden -->
					<input type="hidden" name="id" />
					<!-- 有些东西 我们后台需要 但是前台不显示的处理方法....  hidden -->
				</tr>
				
				<tr>
					<td>手机号码：</td>
					<td><input class="easyui-validatebox" data-options="required:true" name="phone" /></td>
				</tr>
				
				<tr>
					<td>密码：</td>
					<td><input class="easyui-validatebox" data-options="required:true" name="password" /></td>
				</tr>
				
				<tr>
					<td>公司ID：</td>
					<td><input class="easyui-validatebox" data-options="required:true" name="companyId" /></td>
				</tr>
				
				<tr>
					<td><a class="easyui-linkbutton" iconCls="icon-ok" onclick="save();" >保存</a></td>
				</tr>
			</table>
		</form>
	</div>
	<!-- 新增和修改所使用的div 结束 -->
</body>
</html>
<script >


var addOrUpdate ='add';


//查询开始
//模糊查询
function searchName(){
	var phone=$("#searchBox").val();
	
	if( null !=phone && ""!=phone.trim()){
		/* load会自动重新发送原来datagrid中的请求,并可以把查询参数发给后台 .请求完后根据后台发送的信息更新表的数据   */
		$('#userTable').datagrid('load',{
			'phone':phone
		});
	}
};
//查询结束

//删除方法开始
function deleteByIds(){
	var url   ='${pageContext.request.contextPath}/user/deleteByIds';
	//1 获得选中的id 
	var rows = $("#userTable").datagrid('getSelections');
	// [10,20,30]
	var ids=[];
	
	$(rows).each(function(index,data){
		
		//1 拿到你要删除的id
		var id  = data.id;
		
		//2把id放到数组中去
		
		ids.push(id);
	});
	//alert(ids);
	
	//2提示用户是否确定删除
	$.messager.confirm('确认','您确认想要删除记录吗？',function(flag){ 
		
		//如果用户选择是  flag=true  否则就表示false
	    if (flag){    
	      	//3把ids传递给后台   后台会重新查询1次  自动更新 重载数据
	      	
	      	$.ajax({
	      		url:url,
	      		type:'post',
	      		contentType:'application/json',
	      		//[10,20,30]
	      		data: JSON.stringify(ids),
	      		dataType:'json',
	      		success:function(jsonData){
	      			if(jsonData.data.flag=='1'){
						//1 说明后台都已经输出数据成功
	      				$.messager.show({
							title:'提示', msg:jsonData.data.message, 	timeout:2000
						});
	      				//2 重新请求后台 再次加载数据
	      				$('#userTable').datagrid('reload');
						
					}
	      		}
	      	});
	    }    
	});  
}
//删除方法结束


//update方法开始
function update(){
	
	
	
	//2给对话框里赋值  拿到 原来值
	
	//2.1.1 怎么拿到id
	
	//返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。
	var rows = $("#userTable").datagrid('getSelections');
	
	var length = rows.length ;
	
	if(length == 1){
		//1 给我弹出1个干净的对话框
		add('用户修改');
		
		var row = rows[0];
		
		var id = row.id;
		//$.messager.alert('测试',id);   
		
		//2.1 把id传给后台发一个请求  拿到对象  把后台传过来的对象 分别给我们的文本框
		$("#userForm").form('load','${pageContext.request.contextPath}/user/findById?id='+id);
		
		//在此处明确知道是什么更新操作
		addOrUpdate = 'update';
		
		
		//3提交数据到后台
		
		//4前台接收数据
		
		save(addOrUpdate);
		
	}else{
		$.messager.alert('警告','只能选择1行修改...');   
		return ;

	}
	
	
	
}
//update方法结束


//add增加方法开始
function add(title){
	console.log('进入add方法...');
	
	//清空以前的历史数据
	//$("#userForm").form('clear');
	//1 怎么样可以搞出1个dialog
	$('#userDialog').dialog({
		
		//1 让隐藏的东西显示
		closed:false,
		width:290,
		height:200,
		title:title,
		//模块化 ：  让其他的东西都不能操作
		modal:true,
	});
}
//add增加方法结束




//save保存方法开始
function save(){
	var myUrl ='';
	if(addOrUpdate == 'update'){
		myUrl='update';
	}else{
		myUrl='add';
	}
	//调用form 的 submit方法....
	$('#userForm').form('submit',{
		url:'${pageContext.request.contextPath}/user/'+myUrl,
		//把数据提交到后台之前做数据校验。如果校验不通过 返回的是false。不提交表单。
		//只有返回值为true的时候才提交表单到后台
		success:function(jsonData){
			jsonData = eval("("+jsonData+")");
			
			var flag = jsonData.data.flag;
			var message = jsonData.data.message;
			console.log(flag);
			console.log(message);
			
			//1 关闭对话框
			if(flag=='1'){
				//说明后台都已经插入数据成功
				$("#userDialog").dialog('close');
			}
			
			//2在右下角给出提示
			$.messager.show({
				title:'提示', msg:message, 	timeout:2000
			});
			
			//3 重新请求后台 再次加载数据
			$('#userTable').datagrid('reload');
		}
	});
}
//save保存方法 结束
		


$(function(){
	//1
	$('#userTable').datagrid({
		title:'用户列表',
		width:500,
		height:300,
		
        
        //增加分页逻辑的代码 begin
        pageSize:3,
        pagination:true,
        pageList:[3,6,9,12],
        //增加分页逻辑的代码 end
		
		//表示不换行
		nowrap:false,
		
		//工具栏
		toolbar: '#userToolBar',

		fitColumns:true,
		url:'${pageContext.request.contextPath}/user/findAll',
		
		//表示表格的列  重点： 这里要用 二维数组： [[]] 兼容复杂的表格
		columns:[[{
			field:'id',
			width:80,
			//可以使得 id列隐藏。然后如果做操作会自动传递隐藏的id  全选
			checkbox:true
		},{
			field:'name',
			title:'姓名',
			width:100,
			//sortable:true
		},{
			field:'phone',
			title:'手机',
			width:80,
			align:'right',
			//sortable:true
		},{
			field:'password',
			title:'密码',
			width:80,
			//align:'right',
			//sortable:true
		},{
			field:'companyId',
			title:'公司',
			width:80,
			align:'right',
			//sortable:true
		}]],
	}); //end of datagrid
	
	
	


});

</script>

